import React from 'react'
import Code from './Code'
import TweetInput from '../ui-components/tweetInput'
import style from './style'
import util from '../util'
import cx from 'classnames'
import { bindActionCreators } from 'redux'
import styleTweetInput from './style.tweetInput.styl'
import { connect } from 'react-redux'
import * as homeAction from '../actions/home.action'
import * as fileAction from '../actions/file.action'

@connect(({app, newsFeed, upload}) => ({app, newsFeed, upload}), dispatch => ({actions: bindActionCreators({...homeAction, ...fileAction}, dispatch)}))
export default class extends React.Component {
  state = {
  }

  render() { 
    return (
      <div className={cx({
        [style.root]: true
      })}>
        <Code>{'<TweetInput onChange={..}/>'}</Code>
        <div>
					<TweetInput 
            handleFileChange={ (file, success) => {
							// 请求上传地址
							this.props.actions.requestFeedImagesUploadUrl(res => {
								// 上传图片
								this.props.actions.fileUpload({
									file: file.file,
									url: res.data.url,
									cb: () => {
										success({
											id: file.id,
											uuid: res.data.uuid
										})
									}
								})
							})
            }}
						onSubmit={value => console.log(value)}
						atList={this.props.app.atList}
						fetchAtList={this.props.actions.fetchAtList}
						className={styleTweetInput.multi} 
						label="发布状态.." 
						pic
						multi/>
        </div>
        <div>
					<TweetInput
						atList={this.props.app.atList}
						className={styleTweetInput.simple} 
						label="发表评论.."/>
        </div>
      </div>
    )
  }
}
